<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>别踩白块</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .wrapper {
      position: relative;
      width: 400px;
      height: 520px;
      border: 1px solid #222;
      margin: 50px auto 0;
      overflow: hidden;
    }

    .wrapper .box {
      position: absolute;
      bottom: 130px;
      width: 100%;
      height: 100%;
      box-shadow: 0 2px 15px rgba(0, 0, 0, .5);
    }

    .box>.rdiv {
      width: 400px;
      height: 130px;
    }

    .rdiv>.odiv {
      float: left;
      width: 100px;
      height: 130px;
      border-left: 1px solid #222;
      border-bottom: 1px solid #222;
      box-sizing: border-box;
      cursor: pointer;
    }

    .rdiv>.odiv:first-child {
      border-left: none;
    }

    .play {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 20px;
      width: 200px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border-radius: 10px;
      background-color: #ff9950;
      font-size: 30px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <div class="box"></div>
  </div>
  <div class="play">开始游戏</div>

  <script>
    const wrapper = document.querySelector('.wrapper');
    const box = document.querySelector('.box');
    const play = document.querySelector('.play');

    let timer = null,
      score = 0,
      speed = 5,
      flag = true;

    click();

    function click() {
      play.addEventListener('click', () => {
        play.style.display = 'none';
        boxMove();
      });
    }

    function boxMove() {
      timer = setInterval(() => {
        box.style.top = box.offsetTop + speed + 'px';
        // 当box移动到wrapper区域最底部时，创建一行rdiv（包含有4个odiv)，并且向上移动130px
        if (box.offsetTop >= 0) {
          createBox();
          box.style.top = '-130px';
        }
        // box最多有6个rdiv，4(wrapper刚好容纳4个) + 1(每次上移130px) + 1(当没有点击时，移动到最后一个rdiv元素的顶部，即游戏结束)
        if (box.children.length == 6) {
          for (let i = 0; i < 4; i++) {
            // 判断box中最后一个rdiv里面的4个odiv元素是否包含i类名
            // 还有的话即最后一行的黑色方块没有被点击成功，游戏结束
            if (box.lastElementChild.children[i].className == 'odiv i') {
              clearInterval(timer);
              flag = false;
              alert(`游戏结束！得分是：${score}`);
            }
          }
          // 点击成功的话，移除box的最后一个子元素rdiv
          box.removeChild(box.children[box.children.length - 1]);
        }
      }, 30);
      // 事件委托绑定点击事件
      wrapper.addEventListener('click', blockClick);
    }

    // 点击方块
    function blockClick(e) {
      let t = e.target;
      if (t.className == 'odiv i' && flag == true) { // 点中了带颜色的方块
        t.className = 'odiv';
        t.style.backgroundColor = '#ddd';
        score++;
      } else if (t.className == 'odiv' && t.style.backgroundColor == '') { // 点中了白块
        clearInterval(timer);
        flag = false;
        alert(`游戏结束！得分是：${score}`);
      }
      if (score % 10 == 0) speed += 2;
    }

    // 创建一行元素(rdiv)添加到box中
    function createBox() {
      let rdiv = document.createElement('div');
      rdiv.classList.add('rdiv');
      // rdiv.className = 'rdiv';
      // rdiv.setAttribute('class', 'rdiv');
      for (let i = 0; i < 4; i++) {
        let odiv = document.createElement('div');
        odiv.classList.add('odiv');
        rdiv.appendChild(odiv);
      }
      // 最新创建好的rdiv元素放在最前面
      if (box.children.length == 0) {
        box.appendChild(rdiv);
      } else {
        box.insertBefore(rdiv, box.children[0]);
      }
      // 随机生成每一行里面的黑色方块
      let random = Math.floor(Math.random() * 4);
      let blackBox = box.children[0].children[random];
      blackBox.className = 'odiv i';
      blackBox.style.backgroundColor = '#000';
    }
  </script>
</body>

</html>